<template>

  <div class="app_list_details_container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>IPA</el-breadcrumb-item>
      <el-breadcrumb-item>APP列表</el-breadcrumb-item>
      <el-breadcrumb-item>APP详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="app_list_details_head">
      <div style="width: 100%;height: 110px;float: left">
        <div class="demo-image">
          <div class="block">
            <el-image
              style="width: 100px; height: 100px"
              :src="url"
            >
            </el-image>
          </div>
        </div>
        <div class="app_list_details_text">
          <h2>App名称</h2>
          <p class="app_subtitle">一款应用App</p>
        </div>
      </div>
      <div style="width: 100%">
        <div class="box_info">
          <p>appid</p>
          <p>作者</p>
        </div>
        <div class="box_info">
          <p>bundle id</p>
          <p>作者</p>
        </div>
        <div class="box_info">
          <p>状态</p>
          <p>作者</p>
        </div>
        <div class="box_info">
          <p>版本</p>
          <p>作者</p>
        </div>
        <div class="box_info">
          <p>财务报告下载</p>
          <p>作者</p>
        </div>
      </div>
    </div>
    <div class="app_list_details_v">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>版本列表</span>
        </div>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="version"
            label="版本"
          >
          </el-table-column>
          <el-table-column
            prop="shelfime"
            label="上架时间"
          >
          </el-table-column>
          <el-table-column
            prop="updateLog"
            label="更新日志">
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <div class="app_list_details_ipa_list">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>版本列表</span>
        </div>
        <el-table
          :data="tableData1"
          style="width: 100%">
          <el-table-column
            prop="version"
            label="版本"
          >
          </el-table-column>
          <el-table-column
            prop="uploadtime"
            label="上传时间"
          >
          </el-table-column>
          <el-table-column
            prop="note"
            label="备注">
          </el-table-column>
          <el-table-column
            prop="qrCode"
            label="扫码安装">
          </el-table-column>
        </el-table>
      </el-card>
    </div>


  </div>

</template>

<script>
  export default {
    name: "AppListDetails",
    data() {
      return {
        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        tableData: [{
          version: '1',
          shelfime: '12345',
          updateLog: '1111111',
        }, {
          version: '2',
          shelfime: '12345',
          updateLog: '1111111',
        }],
        tableData1: [{
          version: '1',
          uploadtime: '12345',
          note: '1111111',
          qrCode: '1111111',
        }],

      }
    }
  }
</script>

<style scoped>

  .app_list_details_container {
    width: 100%;
    height: 100%;

  }

  .app_list_details_head {
    margin-top: 20px;
    width: 100%;
    height: 160px;
    background-color: white;
  }

  .block {
    position: relative;
    float: left;

  }

  .demo-image {
    margin: 5px 0 0 5px;
  }

  .app_list_details_text {
    float: left;
  }

  h2 {

    margin: 20px 0 10px 10px;
  }

  .app_subtitle {
    margin-left: 10px;
    /*float: bottom;*/
  }

  .box_info {
    margin-top: 10px;
    float: left;
    width: 20%;
    height: 50px;
    text-align: center;
  }

  .a.clearfix {
    text-align: center;
  }

  app_list_details_v {
    height: 200px;
    margin-top: 20px;
    background-color: white;
  }

  .app_list_details_ipa_list {
    height: 200px;
    margin-top: 20px;
    background-color: white;
  }

</style>
